<template>
  <div>
    <h1>商品统计</h1>
    <span>时间范围：</span>
    <el-date-picker
      v-model="DataValue"
      type="daterange"
      unlink-panels
      range-separator="至"
      start-placeholder="Start date"
      end-placeholder="End date"
      :shortcuts="shortcuts"
    />
    <div ref="echartsContainer" style="width: 100%; height: 400px"></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref, watch } from 'vue'
import { fetchOrderTotal } from '../api/total/index'
import moment from 'moment'
import * as echarts from 'echarts'
const echartsContainer = ref(null)
let chartInstance = null
const DataValue = ref(['2019-11-04', '2024-12-11'])
const newDataValue = ref('')
const eachartX = ref([])
const eachartY = ref([])
watch(
  DataValue,
  async () => {
    newDataValue.value = DataValue.value.map((ele) => moment(ele).format('YYYY-MM-DD HH:mm:ss'))
    const data = {
      date: JSON.stringify(newDataValue.value),
    }
    try {
      const res = await fetchOrderTotal(data)

      eachartX.value = res.data.map((ele) => moment(ele.orderTime).format('YYYY-MM-DD'))
      eachartY.value = res.data.map((ele) => ele.orderAmount)

      if (chartInstance) {
        chartInstance.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            },
          },
          xAxis: {
            type: 'category',
            data: eachartX.value,
            axisLabel: {
              interval: 0,
              rotate: 325,
            },
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              data: eachartY.value,
              type: 'line',
            },
          ],
        })
      }
    } catch (error) {
      console.error('Error fetching goods total:', error)
    }
  },
  { immediate: true },
)

onMounted(() => {
  chartInstance = echarts.init(echartsContainer.value)
  // const option = {
  //   xAxis: {
  //     type: 'category',
  //     data: eachartX.value,
  //   },
  //   yAxis: {
  //     type: 'value',
  //   },
  //   series: [
  //     {
  //       data: eachartY.value,
  //       type: 'bar',
  //     },
  //   ],
  // }
  // chartInstance.setOption(option)
})
onUnmounted(() => {
  if (chartInstance) {
    chartInstance.dispose()
  }
})

//[120, 200, 150, 80, 70, 110, 130]
// ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
const shortcuts = [
  {
    text: 'Last week',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: 'Last month',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: 'Last 3 months',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]
</script>

<style scoped>
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}

.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.demo-date-picker .block:last-child {
  border-right: none;
}

.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>
